<template>
  <view class="wrap" align="top" @click="path">
    <courseImage
      width="100%"
      height="186"
      :image="data.cover_url"
      :courseType="data.course_type"
      :courseTypeText="data.course_type_text"
      :promotionType="data.promotion_type"
      :promotionTypeText="data.promotion_type_text"
    ></courseImage>
    <view class="content">
      <view class="title u-line-1">{{ data.title }}</view>
      <view class="u-flex u-row-between">
        <view class="count">{{ data.sale_count | filCount(data.student_count) }}人在学</view>
        <view class="free" v-if="$edu.test.isDef(data.is_buy) && data.is_buy !== 0">已购买</view>
        <template v-else>
          <view class="price" v-if="data.price > 0">
            {{ data.price | formatCurrency }}
          </view>
          <view class="free" v-else>免费</view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
export default {
  components: {
    courseImage,
  },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {}
  },
  filters: {
    filCount(val, num) {
      if (val || val == 0) {
        return val
      } else {
        return num
      }
    },
  },
  methods: {
    path() {
      this.$emit('path')
    },
  },
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 20rpx 0;
  .content {
    margin-top: 15rpx;
    .title {
      font-size: 30rpx;
      font-weight: 500;
      color: $edu-main-color;
      letter-spacing: 1rpx;
      margin-bottom: 25rpx;
    }
    .count {
      font-size: 24rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
    .price {
      font-size: 30rpx;
      font-weight: 500;
      color: $edu-price-color;
    }
    .free {
      font-size: 30rpx;
      font-weight: 500;
      color: $edu-free-color;
    }
  }
}
</style>
